<template>
	<view class="wallet-add" style="height: 100%;background-color: #fff;">
		<view style="padding: 10px;">
			<view class="wallet-aste">
				<view>余额 （元）</view>
				<view class="wallet-bate">
					<view class="wallet-order">
						<button size="mini" style="color: #F3A73F; margin-right: 10px;" @click="but()">充值</button>
						<button size="mini" style="color: #F3A73F;" @click="withdraw()">提现</button>
					</view>
				</view>
			</view>
			<uni-popup ref="popup" type="share" :animation="false">
				<view
					style="width: 90%;background-color: #fff;border-radius: 10px;font-size: 13px;margin: auto; margin-bottom: 50%;">
					<view style="padding: 15px 0; display: flex; border-bottom: 1px solid #DCDFE6; margin: 0 30px;">
						<view style="color: #A5A5A5">充值方式</view>
						<view style="margin-left: auto;">中国建设银行银行卡</view>
					</view>
					<view style="padding: 15px 0;">
						<view style="margin: 0 30px; color: #A5A5A5">充值金额</view>
					</view>
					<view style="padding: 10px 0;display: flex; border-bottom: 1px solid #DCDFE6; margin: 0 30px;">
						<view style="margin-right: 15px; font-size: 30px;">￥</view>
						<view style="font-size: 25px; margin-top: 3px; color: #A5A5A5">请输入金额</view>
					</view>
					<view style="padding: 10px; margin-top: 5px;">
						<view style="margin-left: 20px; color: #A5A5A5">该卡本次最多可充值￥10000</view>
					</view>
					<view style="padding: 15px 0;">
						<button
							style="font-size: 14px; margin: 0 30px 10px 30px; color: #FFFFFF; background-color: red;"
							@click="postadmin()">确认充值</button>
						<view style="text-align: center; font-size: 14px;">取消充值</view>
					</view>
				</view>
			</uni-popup>

			<view>
				<view class="wallet-secu">账单明细</view>
				<!-- <navigator url="/pages/wallet/create">

					<view class="wallet-secu">绑定银行卡</view>
				</navigator> -->
			</view>

			<uni-popup ref="bupot" type="share" :animation="false">
				<view
					style="width: 90%;background-color: #fff;border-radius: 10px;font-size: 13px;margin: auto;margin-bottom: 50%;">
					<view style="border-bottom: 1px solid #DCDFE6; margin: 0 20px; text-align: center;">
						<image src="../../static/118.png"
							style="border-radius: 60px; width: 60px; height: 60px; margin-top: 25px"></image>
						<view style="padding: 15px 0; font-size: 16px; color: #2979FF">充值成功</view>
					</view>
					<view style="padding: 10px 0; margin: 0 30px; color: #A5A5A5">
						<view style="display: flex;">
							<view>充值金额</view>
							<view style="margin-left: auto;">￥1000</view>
						</view>
						<view style="padding: 20px 0 15px 0; display: flex;">
							<view>充值方式</view>
							<view style="margin-left: auto;">中国建设银行储蓄卡 (1100)</view>
						</view>
					</view>
					<view style="padding-bottom: 5px;">
						<button
							style="font-size: 15px; margin: 0 20px 20px 20px; color: #FFFFFF; background-color: #2979FF;">完成</button>
					</view>
				</view>
			</uni-popup>

			<uni-popup ref="wtpopup" type="share" :animation="false">
				<view
					style="width: 90%;background-color: #fff;border-radius: 10px;font-size: 13px;margin: auto; margin-bottom: 50%;">
					<view style="padding: 15px 0; display: flex; border-bottom: 1px solid #DCDFE6; margin: 0 30px;">
						<view style="color: #A5A5A5">提现账户</view>
						<view style="margin-left: auto;">中国建设银行银行卡</view>
					</view>
					<view style="padding: 15px 0;">
						<view style="margin: 0 30px; color: #A5A5A5">提现额度</view>
					</view>
					<view style="padding: 10px 0;display: flex; border-bottom: 1px solid #DCDFE6; margin: 0 30px;">
						<view style="margin-right: 15px; font-size: 30px;">￥</view>
						<view style="font-size: 25px; margin-top: 3px; color: #A5A5A5">请输入金额</view>
					</view>
					<view style="padding: 10px; margin-top: 5px;">
						<view style="margin-left: 20px; color: #A5A5A5">可提现余额￥10000</view>
					</view>
					<view style="padding: 15px 0;">
						<button
							style="font-size: 14px; margin: 0 30px 10px 30px; color: #FFFFFF; background-color: red;"
							@click="addwt()">2小时到账，确定提现</button>
						<view style="text-align: center; font-size: 14px;">取消提现</view>
					</view>
				</view>
			</uni-popup>
			
			<uni-popup ref="wesbupot" type="share" :animation="false">
				<view
					style="width: 90%;background-color: #fff;border-radius: 10px;font-size: 13px;margin: auto;margin-bottom: 50%;">
					<view style="border-bottom: 1px solid #DCDFE6; margin: 0 20px; text-align: center;">
						<image src="../../static/118.png"
							style="border-radius: 60px; width: 60px; height: 60px; margin-top: 25px"></image>
						<view style="padding: 15px 0; font-size: 16px; color: #2979FF">提现成功</view>
					</view>
					<view style="padding: 10px 0; margin: 0 30px; color: #A5A5A5">
						<view style="display: flex;">
							<view>提现金额</view>
							<view style="margin-left: auto;">￥1000</view>
						</view>
						<view style="padding: 20px 0 15px 0; display: flex;">
							<view>提现账户</view>
							<view style="margin-left: auto;">中国建设银行储蓄卡 (1100)</view>
						</view>
					</view>
					<view style="padding-bottom: 5px;">
						<button
							style="font-size: 15px; margin: 0 20px 20px 20px; color: #FFFFFF; background-color: #2979FF;">完成</button>
					</view>
				</view>
			</uni-popup>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {
			but() {
				this.$refs.popup.open();
			},
			postadmin() {
				this.$refs.bupot.open();
			},
			withdraw(){
				this.$refs.wtpopup.open();
			},
			addwt(){
				this.$refs.wesbupot.open();
			}
		}
	}
</script>

<style>
	.wallet-add {}

	.wallet-aste {
		background-color: #F3A73F;
		padding: 20px;
		border-radius: 10px;
		color: #FFFFFF;
	}

	.wallet-bate {
		display: flex;
		padding-top: 10px;
	}

	.wallet-order {
		margin-left: auto;
	}

	.wallet-secu {
		padding-top: 20px;
		border-bottom: 1px solid #DCDFE6;
		padding-bottom: 10px;
	}
</style>
